<template>
  <footer class="footer">
    <span class="todo-count">剩余<strong>{{ list.length }}</strong></span>
    <ul @click="changeSel" class="filters">
      <li>
        <a @click="isSel='all'" :class="{selected:isSel==='all'
        }" href="javascript:;" >全部</a>
      </li>
      <li>
        <a   @click="isSel='no'" :class="{selected:isSel==='no'
        }"
        href="javascript:;">未完成</a>
      </li>
      <li>
        <a @click="isSel='yes'" :class="{selected:isSel==='yes'
        }"
        href="javascript:;" >已完成</a>
        <!-- 在我的理解中就是上述操作点击哪个选中哪个，只不过vue用的比较麻烦，不知道是自己理解错了还是想得太多 ，因为vue没有排它思想-->
      </li>
    </ul>
    <button @click="clearClick" class="clear-completed">清除已完成</button>
  </footer>
</template>

<script>
export default {
props:['list'],
data(){
  return{
    //1.定义状态,isAll取值范围是all/yes/no
    isSel:'all'
  }
},
methods:{
  changeSel(){
    console.log(this.isSel);
    //当a标签被点击时就是最恰当的时机
    this.$emit('changeTask',this.isSel);
  },
  clearClick(){
    // console.log('我被点击了');
this.$emit('clearDone')
  }
}
}

</script>